<template>
  <van-nav-bar title="购物车" left-text="返回" left-arrow @click-left="onClickLeft" />
  <section>
    <ul>
      <li>
        <div class="check">
          <van-checkbox class="vantcheck" v-model="checked"></van-checkbox>
        </div>
        <h2>
          <img src="/public/image/金豆.png" alt="" />
        </h2>
        <div class="goods">
          <div class="goods-title">
            <span>小金豆盆栽新中式盆景金豆树苗带果桌面禅意绿植室内好养易活四季</span>
          </div>
          <div class="goods-num">
            <div class="goods-price">￥199.00</div>
            <van-stepper v-model="value"></van-stepper>
          </div>
        </div>
      </li>
    </ul>
  </section>
  <!-- <footer>
    <div class="redio">
      <van-checkbox v-model="checked"></van-checkbox>
    </div>
    <div class="total">
      <div>全选（<span class="total-active">1</span>）</div>
    </div>
    <div class="order">
      <div class="order-price">
        <span class="total-active">￥199.00</span>
      </div>
      <div class="order-jiesuan">结算</div>
    </div>
  </footer> -->

  <footer>
    <van-submit-bar :price="3050" button-text="提交订单" @submit="onSubmit">
  <van-checkbox v-model="checked">全选</van-checkbox>
  
</van-submit-bar>

  </footer>
</template>

<script setup>
import { ref } from 'vue'
const onClickLeft = () => history.back();
const onSubmit = () => showToast('点击按钮');
const checked = ref(true)
const value = ref(1)
</script>

<style scoped>
header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  height: 1.173333rem;
  color: #fff;
  background-color: #ff5777;
}

header i {
  padding: 0 0.4rem;
  font-size: 0.586666rem;
}

header span {
  padding: 0 0.4rem;
  font-size: 0.426666rem;
}

section {
  background-color: #f5f5f5;
}

section ul {
  display: flex;
  flex-direction: column;
}

section ul li {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.16rem 0.533333rem;
  margin: 0.213333rem 0;
  background-color: #fff;
}

section ul li .check {
  padding-right: 0.373333rem;
}

section ul li .goods {
  display: flex;
  height: 2.525rem;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 0.4rem;
  font-size: 0.32rem;
}

section ul li .goods .goods-title {
  display: flex;
  font-size: 0.355rem;
  font-weight: 700;
}

section ul li .goods .goods-title i {
  font-size: 0.586666rem;
}

section ul li .goods .goods-price {
  padding: 0.08rem 0;
  color: #ff5777;
  font-weight: 700;
  font-size: 0.4375rem;
}

section ul li .goods .goods-num {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

section ul li img {
  width: 1.973333rem;
  height: 2.573333rem;
}

/* footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 1.28rem;
  border-top: 0.053333rem solid #ccc;
  position: absolute;
  bottom: 0;
  left: 0;
  background-color: #fff;
}

footer .radio {
  padding: 0 0.4rem;
}

footer .total {
  flex: 1;
  font-size: 0.32rem;
}

footer .total .total-active {
  color: #ff5777;
}

footer .order {
  width: 4.4rem;
  text-align: center;
  font-size: 0.426666rem;
  display: flex;
  justify-content: space-around;
  align-items: center;
}

footer .order .order-price {
  color: #ff5777;
  line-height: 1.28rem;
  font-weight: 700;
}

footer .order .order-jiesuan {
  padding: 0.125rem 0.3875rem;
  height: 0.6375rem;
  background-color: #ff5777;
  color: #fff;
  font-size: 0.4125rem;
  line-height: 0.6375rem;
  border-radius: 0.4rem;
} */
</style>
